<template>
	<view class="login">
		<view class="status-bar"> </view>
		<view class="content">
			<view class="top-btn">
				<image src="/static/icon/login/back.png" @tap="goBack" class="t-img"/>
				<!-- <image src="/static/icon/login/home.png" /> -->
			</view>
			<view class="logo">
				<image src="/static/icon/login/logo.png" class="l-img"/>
				<!-- <view class="title"> 请选择角色登录 </view> -->
				<view class="title"> 用户登录 </view>
			</view>
			<view class="login-item">
				<view class="item">
					<view class="label"> 账号 </view>
					<view class="value">
						<input type="number" v-model="mobile" placeholder="请输入手机号码" placeholder-style="color: #BBBBBB;font-size: 14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 密码 </view>
					<view class="value">
						<input type="safe-password" v-model="password" :password="true" placeholder="请输入密码" placeholder-style="color: #BBBBBB;font-size: 14px;" />
					</view>
				</view>
				<view class="check">
					<view class="remember-me">
						<image class="r-img" src="/static/icon/login/checked.png" @tap="rememberMe" v-if="isRememberMe" />
						<image class="r-img" src="/static/icon/login/check.png" @tap="rememberMe" v-else />
						<text class="txt"> 记住密码 </text>
					</view>
					<view class="forgot-pwd" @tap="forgotPWD"> 忘记密码 </view>
				</view>
				<view class="btn" @tap="login"> 登录 </view>
				<view class="go-register"> 还没有账号，<text @tap="goRegister(1)"> 去注册 </text> </view>
				<view class="wx-login" @tap="wxLogin">
					<image src="../../static/icon/login/wx.png" class="w-img"/>
					<view> 微信登录 </view>
				</view>
			</view>
			<!-- 登陆成功后选择角色 -->
			<view class="role-list" v-if="false">
				<view class="item">
					<view class="label">
						<image src="/static/icon/login/user.png" class="l-img"/>
						<image src="/static/icon/login/userT.png" class="t l-img" mode="heightFix" />
					</view>
					<view class="value">
						<image src="/static/icon/login/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<image src="/static/icon/login/rider.png" class="l-img"/>
						<image src="/static/icon/login/riderT.png" class="t l-img" mode="heightFix" />
					</view>
					<view class="value">
						<image src="/static/icon/login/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<image src="/static/icon/login/shop.png" class="l-img"/> 
						<image src="/static/icon/login/shopT.png" class="t l-img" mode="heightFix" />
					</view>
					<view class="value">
						<image src="/static/icon/login/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item">
					<view class="label">
						<image src="/static/icon/login/yy.png" class="l-img"/> 
						<image src="/static/icon/login/yyT.png" class="t l-img" mode="heightFix" />
					</view>
					<view class="value">
						<image src="/static/icon/login/right.png" class="v-img"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { LoginApi } from '@/service/index.js'
	import { useUserStore, useCommStore } from '@/store/index.js'
	import { isValidPhone, isValidIdPwd } from '@/utils/valdate.js'
	const mobile = ref('')
	const password = ref('')
	const isRememberMe = ref(false)
	const goBack = () =>{
		uni.navigateBack()
	}
	// 忘记密码
	const forgotPWD = () => {
		goRegister(2)
	}
	// 记住密码
	const rememberMe = () => {
		isRememberMe.value = !isRememberMe.value
	}
	// 登录
	const login = () => {
		const { SETMEMBER, SETREMEMBERME } = useUserStore()
		const { SETCOMM } = useCommStore()
		let params = {
			mobile: mobile.value,
			loginpass: password.value
		}
		LoginApi(params).then(res => {
			SETMEMBER(res)
			SETCOMM()
			if(isRememberMe.value) SETREMEMBERME(params) // 记住密码
			// uni.switchTab({
			// 	url: '/pages/index/index'
			// })
      uni.navigateBack()
		})
	}
	// 去注册
	const goRegister = (type) => {
		uni.navigateTo({
			url: `/pages/register/register?type=${type}`
		})
	}
	// 微信登陆
	const wxLogin = () => {
    getApp().globalData.toast('暂未开通微信登录')
	}
	onLoad(() => {
		const { rememberMe } = useUserStore()
		if(rememberMe.mobile) {
			isRememberMe.value = true
			mobile.value = rememberMe.mobile
			password.value = rememberMe.loginpass
		}
	})
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		min-height: 100vh;
		background: url('/static/icon/login/bg.png') no-repeat center center;
		background-size: 100% 100%;
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.content {
			position: relative;
			width: 100%;
			padding: 0 27px;
			padding-top: 64px;
			box-sizing: border-box;
			.top-btn {
        display: none;
				position: absolute;
				left: 20px;
				top: 10px;
				.t-img {
					width: 42px;
					height: 42px;
				}
			}
			.logo {
				text-align: center;
				.l-img {
					width: 70px;
					height: 70px;
				}
				.title {
					color: #333333;
					font-size: 18px;
					font-weight: 500;
					margin-top: 20px;
				}
			}
			.login-item {
				margin-top: 58px;
				.item {
					margin-bottom: 14px;
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						margin-top: 8px;
					}
					.value {
						margin-top: 9px;
						padding: 12px 0;
						border-bottom: 1px solid #eeeeee;
						input {
							color: #BBBBBB;font-size: 14px;
							font-weight: 400;
						}
					}
				}
				.check {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.remember-me {
						display: flex;
						align-items: center;
						.r-img {
							width: 16px;
							height: 16px;
							margin-right: 6px;
						}
						.txt {
							color: #999999;
							font-size: 14px;
							font-weight: 400;
							line-height: 14px;
						}
					}
					.forgot-pwd {
						font-weight: 400;
						font-size: 14px;
						color: #999999;
						line-height: 14px;
					}
				}
				.btn {
					height: 50px;
					color: #FFFFFF;
					font-size: 17px;
					font-weight: 500;
					margin-top: 50px;
					line-height: 50px;
					text-align: center;
					background: #FF3B1E;
					border-radius: 106px;
				}
				.go-register {
					color: #999999;
					font-size: 14px;
					font-weight: 500;
					margin-top: 20px;
					line-height: 24px;
					text-align: center;
					text {
						color: #FF3B1E;
					}
				}
				.wx-login {
          display: none;
					margin-top: 95px;
					text-align: center;
					.w-img {
						width: 40px;
						height: 40px;
					}
					view {
						margin-top: 11px;
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
					}
				}
			}
			// 选择角色
			.role-list {
				width: 100%;
				margin-top: 50px;
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 80px;
					background: #FFFFFF;
					border-radius: 10px;
					padding: 0 14px 0 18px;
					margin-bottom: 20px;
					box-shadow: 0px 3px 12px 0px rgba(241,241,241,0.7);
					.label {
						display: flex;
						align-items: center;
						font-size: 17px;
						font-weight: 600;
						color: #333333;
						.l-img {
							width: 50px;
							height: 50px;
						}
						.t {
							height: 17px;
							margin-left: 14px;
						}
					}
					.value {
						.v-img {
							width: 22px;
							height: 22px;
						}
					}
				}
			}
		}
	}
</style>
